<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    img {
        width: 220px;
        display: block;
    }   
    .item {
        box-shadow: 2px 2px 2px #999;
        position: absolute;
        padding: 10px;
    }
    #box{
      position: relative;
    }
</style>

<div id="box">
   
</div>

<script>


  //确定列数
  //把每一列的高度放入数组中
  //找到高度最小列的下标和高度值
  //让下一行的第一个排在上一行的高度最小列的下面，*****并更新数组中各列的高度*****

    var box = document.getElementById('box');
    var items = box.children;
    // 间隙 为10像素 相当于外边距
    var gap = 10;
    var data=[
    "img/0.jpg",
    "img/1.jpg",
    "img/2.jpg",
    "img/3.jpg",
    "img/4.jpg",
    "img/5.jpg",
    "img/6.jpg",
    "img/7.jpg",
    "img/8.jpg",
    "img/9.jpg",
    "img/10.jpg",
    "img/11.jpg",
    "img/12.jpg",
    "img/13.jpg",
    "img/14.jpg",
    "img/15.jpg"
    ]
    window.onload = function() {
      //页面加载时渲染DOM
        render(data);
      //调用函数
        waterFall();      
    };

    // 页面尺寸改变时实时触发
        window.onresize = function() {
            waterFall();
        };


    //本地假数据 生成html结构
    function render(data){
          data.map((i)=>{
                var div = document.createElement("div");
                div.className = "item";
                div.innerHTML = '<img src=' +i + '>';
                box.appendChild(div);
          })  
    }


    //瀑布流函数
     function waterFall() {
            //确定列数 = 页面的宽度/图片的宽度
            var pageWidth = getWidth();
            var itemWidth = items[0].offsetWidth;//offsetWidth=宽+内边距+边框  //outerWidth 包括外边距
            var columns = parseInt(pageWidth / (itemWidth + gap));
            //设置父盒子水平居中
            box.style.width=(itemWidth+gap)*columns-gap+"px";
            box.style.margin="0 auto";
            var arr = [];//存储每一列的总的高度
            for (var i = 0; i < items.length; i++) {
                if (i < columns) {
                    //确定第一行
                    items[i].style.top = 0;
                    items[i].style.left = (itemWidth + gap) * i + 'px';
                    arr.push(items[i].offsetHeight);

                } else {
                    // 其他行
                    // 每次找到数组中最小高度和它的索引
                    var minHeight = arr[0];
                    var index = 0;
                    for (var j = 0; j < arr.length; j++) {
                        if (minHeight > arr[j]) {
                            minHeight = arr[j];
                            index = j;
                        }
                    }
                    // 设置下一行的第一个盒子位置
                    // top值就是最小列的高度 + gap
                    items[i].style.top = arr[index] + gap + 'px';
                    // left值就是最小列距离左边的距离
                    items[i].style.left = (itemWidth+gap)*index + 'px';

                    // 修改最小列的高度 arr数组的值改变
                    // 最小列的高度 = 当前自己的高度+间隙的高度 + 拼接过来的高度
                    arr[index] = arr[index] + items[i].offsetHeight + gap;
                }
            }
        }

    
    // getWidth 处理兼容性
    function getWidth() {
        return  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth//后两个为兼容IE后两个为兼容IE
    }
</script>
</html>